<template>
  <div>
    <!--    <div class="talk">-->
    <!--      {{ talk }}-->
    <!--    </div>-->

    <!--    <el-divider></el-divider>-->

    <el-row>


      <el-col :span="24" style="height: 100%;">
        <!--          <iframe style="width: 100%;height: 650px"-->
        <!--                  src="https://ravelloh.github.io/EverydayNews?style=clean&footer=none"-->
        <!--                  frameborder="0"></iframe>-->


        <el-tabs v-model="activeNames">
          <el-tab-pane label="今日新闻" name="first">
            <ul>
              <li
                v-for="(item, index) in newsDay.content"
                class="list-item"
              >
                <span class="item-text">{{ item }}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="天气预报" name="second">
            <div>
              <el-table
                :data="weatherAll"
                style="width: 100%">

                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="日期"
                  width="180">
                  <template slot-scope="scope">
                    <span>{{
                        getWeekDay(new Date(scope.row.date))
                      }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="气象（白天~夜晚）"
                  width="180">
                  <template slot-scope="scope">
                    <span>{{
                        scope.row.day.weather.info === scope.row.night.weather.info ? scope.row.day.weather.info :
                          scope.row.day.weather.info + ' ~ ' + scope.row.night.weather.info
                      }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="name"
                  label="温度（白天~夜晚）"
                  width="180">
                  <template slot-scope="scope">
                    <span>{{
                        scope.row.day.weather.temperature + '℃ ~ ' + scope.row.night.weather.temperature + '℃'
                      }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="address"
                  label="风向（白天~夜晚）">
                  <template slot-scope="scope">
                    <span>{{
                        scope.row.day.wind.direct + '（' + scope.row.day.wind.power + '）' + " ~ " +
                        scope.row.night.wind.direct + '（' + scope.row.night.wind.power + '）'
                      }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日历" name="third">
            <div class="">
              <el-calendar v-model="value">
                <div
                  slot="dateCell"
                  slot-scope="{date, data}">

          <span :class="getNoWorkClass(date)" @click="updateTime(data)">
            {{ getDayName(date) }}
          </span>

                  <br/><br/>
                  <el-popover placement="right-end"
                              width="300"
                              trigger="hover"
                  >
          <span style="white-space: pre-wrap;font-size: 16px">{{
              getTipsView2(data.day)
            }}</span>

                    <span style="color: #409eff;font-size: 14px" slot="reference" v-model="dayWorkTips">
            {{ getTipsView(data.day) }}
          </span>
                  </el-popover>

                </div>
              </el-calendar>
            </div>
          </el-tab-pane>
        </el-tabs>


      </el-col>
    </el-row>


    <el-dialog title="今日计划" :visible.sync="workTipsDialog">
      <el-form :model="workTip" label-width="10%">
        <el-input
          type="textarea"
          :rows="2"
          :autosize="{ minRows: 15}"
          placeholder="用心做好每件事，让工作变得精彩无比。"
          v-model="workTip.content">
        </el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="workTipsDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {get} from "../../request/http";
import {getDay24, noWorkDay} from "./data";
import moment from "moment";
import {Message} from "element-ui";

export default {
  name: "index",
  data() {
    return {
      activeNames: 'third',
      value: new Date(),
      value2: new Date(),
      currTime: '',
      interval: null,
      talk: '',
      weatherAll: [],
      newsDay: {},
      workTipsDialog: false,
      workTip: {ynDay: '', content: ''},
      dayWorkTips: [],
      day24: [],
      noWorkDays: []
    }
  },
  created() {
    this.day24 = getDay24();
    this.noWorkDays = noWorkDay();


    get('https://apis.tianapi.com/zaoan/index', {key: '3c787d90e3aa1f8248638030e6e120ac'}).then((res) => {
      this.talk = res.data.result.content;
    });

    get('http://www.nmc.cn/rest/weather', {stationid: 'jmHMK'}).then((res) => {
      this.weatherAll = (res.data.data.predict.detail);
    });

    get('https://ravelloh.github.io/EverydayNews/latest.json', {}).then((res) => {
      this.newsDay = (res.data);
    });


    this.axios.post('/ynWorkTips/list').then(res => {
      if (!!res.data.data) {
        this.dayWorkTips = res.data.data;
      }
    })

  },
  beforeDestroy() {
  },
  methods: {
    getTipsView(str) {
      let filterElement = this.dayWorkTips.filter(i => i['ynDay'] === str)[0];
      let newVar = !!filterElement ? filterElement.content : '';
      return newVar.length > 4 ? newVar.substring(0, 4) + '...' : newVar
    },
    getTipsView2(str) {
      let filterElement = this.dayWorkTips.filter(i => i['ynDay'] === str)[0];
      return !!filterElement ? filterElement.content : ''
    },
    getDayName(date) {
      let d = moment(date).format('yyyy-MM-DD');
      let element = this.day24.filter(i => i.day === d)[0];

      return date.getDate() + '日' + (!!element ? ' （' + element.name + '）' : '');
    },
    getNoWorkClass(date) {
      let d = moment(date).format('yyyy-MM-DD');
      let element = this.noWorkDays.filter(i => i === d)[0];

      return (!!element ? 'no-work' : '');
    },
    saveOrUpdate() {
      this.axios.post('/ynWorkTips/saveOrUpdate', {
        ...this.workTip,
        ynDay: moment(this.workTip.ynDay).format('yyyy-MM-DD')
      }).then(res => {
        if (200 === res.data.code) {
          let element = this.dayWorkTips.filter(i => i['ynDay'] === this.workTip.ynDay)[0];
          if (!!element) {
            element.content = this.workTip.content;
          } else {
            this.dayWorkTips.push({ynDay: this.workTip.ynDay, content: this.workTip.content})
          }

          this.workTipsDialog = false;
          Message.success('成功');
          this.workTip.content = '';
        }
      })
    },
    updateTime(data) {

      if (data.type !== 'current-month') {
        return;
      }

      this.axios.post('/ynWorkTips/detail', {
        ynDay: data.day
      }).then(res => {
        if (!!res.data.data) {
          this.workTip = res.data.data;

          this.workTipsDialog = true;
          this.workTip.ynDay = data.day
        } else {
          this.workTipsDialog = true;
          this.workTip.ynDay = data.day
          this.workTip.content = ''
        }
      })
    },
    isSameDate(date1, date2) {
      if (!(date1 instanceof Date) || !(date2 instanceof Date)) {
        throw new Error("Both arguments must be Date objects");
      }

      const year1 = date1.getFullYear();
      const month1 = date1.getMonth();
      const day1 = date1.getDate();

      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();

      return year1 === year2 && month1 === month2 && day1 === day2;

    },

    getWeekDay(date) {
      var week;
      if (date.getDay() == 0) week = "周日"
      if (date.getDay() == 1) week = "周一"
      if (date.getDay() == 2) week = "周二"
      if (date.getDay() == 3) week = "周三"
      if (date.getDay() == 4) week = "周四"
      if (date.getDay() == 5) week = "周五"
      if (date.getDay() == 6) week = "周六"
      return week;
    }
  }
}
</script>

<style scoped>
.no-work {
  background-color: #F37055FF;
  color: white;
  padding: 2px 3px;
  border-radius: 4px;
}

.talk {
  font-family: 'Raleway';
  color: white;
  font-size: 1.1rem;
  /*display: inline;*/
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  margin-bottom: 15px;
}

.talk {
  --borderWidth: 3px;
  background: linear-gradient(0deg, #F5DCC3FF 0%, #F37055FF 60%, #515153 100%);
  /*background: #1D1F20;*/
  text-shadow: 2px 2px 3px #b8264f;
  position: relative;
  border-radius: var(--borderWidth);
}

.talk:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f5dcc3, #f37055, #ef4e7b, #409EFF, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 2s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.el-collapse-item__header {
  height: 38px;
}

</style>
